<template>
  <div class="app-container" v-loading="state.loading">
    <!-- 区域 -->
    <template v-if="type == 'area'">
      <el-descriptions title="公司信息">
        <el-descriptions-item label="公司账号：">
          {{ data?.company?.companyAccount }}
        </el-descriptions-item>
        <el-descriptions-item label="公司名称：">{{ data?.company?.name }}</el-descriptions-item>
        <el-descriptions-item label="公司地址：">{{ data?.company?.address }}</el-descriptions-item>
      </el-descriptions>
      <el-divider />

      <el-descriptions title="区域信息">
        <el-descriptions-item label="区域名称：">{{ data?.area?.name }}</el-descriptions-item>
        <el-descriptions-item label="联系方式：">{{ data?.area?.mobile }}</el-descriptions-item>
        <el-descriptions-item label="邮箱："> {{ data?.area?.email || '无' }}</el-descriptions-item>

        <el-descriptions-item label="负责人名称：">
          {{ data?.area?.contracts }}
        </el-descriptions-item>

        <el-descriptions-item label="状态：">
          <dict-tag
            style="display: inline-block"
            :options="sys_common_staus"
            :value="data?.area?.enabled"
          />
        </el-descriptions-item>
        <el-descriptions-item label="创建时间：">
          {{ data?.area?.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="操作人：">{{ data?.area?.updateName }}</el-descriptions-item>
        <el-descriptions-item label="操作时间：">
          {{ data?.area?.updateTime || data?.area?.createTime }}
        </el-descriptions-item>
      </el-descriptions>
      <el-divider />
    </template>
    <!-- 线路信息 -->
    <template v-if="type == 'route'">
      <el-descriptions title="线路信息">
        <el-descriptions-item label="公司账号：">
          {{ data?.routeVO?.companyAccount }}
        </el-descriptions-item>
        <el-descriptions-item label="公司名称：" :span="2">
          {{ data?.routeVO?.companyName }}
        </el-descriptions-item>
        <el-descriptions-item label="线路名称：">
          {{ data?.routeVO?.areaName }}
        </el-descriptions-item>
        <el-descriptions-item label="负责人名称：">
          {{ data?.routeVO?.contracts }}
        </el-descriptions-item>
        <el-descriptions-item label="邮箱:">{{
          data?.routeVO?.email || '无'
        }}</el-descriptions-item>
        <el-descriptions-item label="联系方式:">{{ data?.routeVO?.mobile }}</el-descriptions-item>
        <el-descriptions-item label="状态：">
          <dict-tag
            style="display: inline-block"
            :options="sys_common_staus"
            :value="data?.routeVO?.enable"
          />
        </el-descriptions-item>
        <el-descriptions-item label="创建时间：">
          {{ data?.routeVO?.createTime }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions>
        <el-descriptions-item label="线路描述：">
          {{ data?.routeVO?.describe }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions>
        <el-descriptions-item label="操作人：">
          {{ data?.routeVO?.updateName }}
        </el-descriptions-item>
        <el-descriptions-item label="操作时间：" :span="2">
          {{ data?.routeVO?.updateTime }}
        </el-descriptions-item>
      </el-descriptions>

      <el-divider />
    </template>
    <!-- 设备相关信息 -->
    <template v-if="(type == 'area' || type == 'route') && data?.positions?.length">
      <el-descriptions title="点位信息" />
      <div class="flex-center" style="margin-bottom: 20px">
        <StaticTable :tableList="data?.positions">
          <el-table-column label="序号" property="staticIndex" width="50" />
          <template v-if="type == 'area'">
            <el-table-column property="name" align="center" label="点位名称" width="200" />
            <el-table-column property="typeName" align="center" label="点位类型" width="150" />
            <el-table-column label="设备数量" width="120" align="center">
              <template #default="{ row }">
                <el-link type="primary" @click="handleClick(row)">{{ row.machineCount }}</el-link>
              </template>
            </el-table-column>
          </template>

          <template v-else-if="type == 'route'">
            <el-table-column property="positionName" align="center" label="点位名称" width="200" />
            <el-table-column
              property="positionTypeName"
              align="center"
              label="点位类型"
              width="150"
            />
            <el-table-column label="设备数量" width="120" align="center">
              <template #default="{ row }">
                <el-link type="primary" @click="handleClick(row)">{{ row.machineCount }}</el-link>
              </template>
            </el-table-column>
          </template>
        </StaticTable>
      </div>
    </template>

    <!-- 点位信息 -->
    <template v-if="type == 'position'">
      <el-descriptions title="点位信息" :column="2">
        <el-descriptions-item label="公司名称：">
          {{ data?.positions?.companyName }}
        </el-descriptions-item>
        <el-descriptions-item label="区域名称：">
          {{ data?.positions?.areaName }}
        </el-descriptions-item>
        <el-descriptions-item label="点位名称：">
          {{ data?.positions?.positionName }}
        </el-descriptions-item>
        <el-descriptions-item label="点位类型：">
          {{ data?.positions?.typeName || data?.positions?.positionTypeName }}
        </el-descriptions-item>
        <el-descriptions-item label="点位对接人：">
          {{ data?.positions?.contracts }}
        </el-descriptions-item>
        <el-descriptions-item label="联系方式：">
          {{ data?.positions?.mobile }}
        </el-descriptions-item>

        <el-descriptions-item label="状态：" span="2">
          <dict-tag
            style="display: inline-block"
            :options="sys_common_staus"
            :value="data?.positions?.enable"
          />
        </el-descriptions-item>

        <el-descriptions-item label="创建人：">
          {{ data?.positions?.createName }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间：">
          {{ data?.positions?.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="操作人：">
          {{ data?.positions?.updateName }}
        </el-descriptions-item>
        <el-descriptions-item label="操作时间：">
          {{ data?.positions?.updateTime }}
        </el-descriptions-item>
      </el-descriptions>
      <el-divider />

      <template v-if="data?.machines?.length">
        <el-descriptions title="设备信息" />
        <div class="flex-center" style="margin-bottom: 20px">
          <StaticTable :tableList="data?.machines">
            <el-table-column label="序号" property="staticIndex" width="50" />
            <el-table-column property="machineId" align="center" label="设备编号" width="200" />
            <el-table-column property="machineName" align="center" label="设备名称" width="150" />
            <el-table-column label="网络状态" width="120" align="center">
              <template #default="{ row }">
                {{ row?.onlineStatus == 1 ? '在线' : '离线' }}
              </template>
            </el-table-column>
          </StaticTable>
        </div>
      </template>
    </template>

    <div class="flex-center">
      <el-button @click="close">关 闭</el-button>
    </div>
  </div>
</template>

<script setup name="CompanyDetail">
import { getAreaDetail } from '@/api/organization/area'
import { getRouteDetail } from '@/api/organization/route'
import { getPositionDetail } from '@/api/organization/points'
import router from '@/router'

const emit = defineEmits(['close'])
const props = defineProps({
  id: {
    type: [String, Number],
    default: ''
  },
  routeId: {
    type: [String, Number],
    default: ''
  },
  positionId: {
    type: [String, Number],
    default: ''
  }
})

const { proxy } = getCurrentInstance()
const { sys_common_staus } = proxy.useDict('sys_common_staus')

const state = reactive({
  loading: false,
  dataList: []
})
const data = ref({})
const type = ref()

async function init() {
  let id, fetchMethod
  if (props.id) {
    //区域
    type.value = 'area'
    id = props.id
    fetchMethod = getAreaDetail
  } else if (props.routeId) {
    //线路
    type.value = 'route'
    id = props.routeId
    fetchMethod = getRouteDetail
  } else if (props.positionId) {
    type.value = 'position'
    id = props.positionId
    fetchMethod = getPositionDetail
  }

  if (!id) return
  state.loading = true
  try {
    const r = await fetchMethod(id)

    data.value = r.data
  } finally {
    state.loading = false
  }
}

function handleClick(obj) {
  if (!obj.routeId) return proxy.$modal.msgWarning('未新建路线')
  if (obj.machineCount <= 0) return proxy.$modal.msgWarning('无设备')

  router.push({
    path: '/device/deviceManage',
    query: {
      companyId: obj.companyId,
      areaId: obj.areaId,
      routeId: obj.routeId,
      positionId: obj.positionId
    }
  })
}

function close() {
  emit('close')
}

watch(() => props, init, { immediate: true, deep: true })
</script>

<style lang="scss" scoped></style>
